<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12306微信版</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #title{
            color: white;
            line-height: 60px;
            background: deepskyblue;
            text-align: center;
            height: 55px;
            font-family: "微软雅黑";
            font-size: 20px;
        }
        #station{
            text-align: center;
            line-height: 60px;
        }
        #from,#to,#change{
            padding: 0px 28px;
            text-align: center;
            font-size: 30px;
            display: inline;
        }
        #train_date{
            line-height: 60px;
        }
        #train_date_text,#train_date_data{
            display: inline;
            padding: 0px 20px;
            font-size: 15px;
        }
        #student{
            display: inline;
            font-size: 15px;
            padding-left: 65px;
        }
        #time{
            line-height: 60px;
        }
        #time_date,#time_text{
            display: inline;
            font-size: 15px;
            padding: 0px 20px;
        }
        #time_date_select{
            border: none;
            font-size:18px;
            -webkit-appearance:none;
        }
        #seat{
            line-height: 60px;
        }
        #seat_text,#seat_data{
            display: inline;
            font-size: 15px;
            padding: 0px 20px;
        }
        #seat_data_select{
            border:none;
            font-size: 18px;
            -webkit-appearance:none;
        }
        #train_type{
            line-height: 10px;
            margin-left:0px;
        }
        #D_train,#all_train,#Z_train,#K_train,#etc,#T_train{
            display: inline-block;
            font-size: 15px;
            border: 1px solid white;
            line-height: 40px;
            background-color: deepskyblue;
            padding-left: 13px;
            color:white;
            margin-left: -5px;
            border-radius: 5px;

        }
        .cb{

        }
        #cx{
            width: 98%;
            margin-left: 3px;
            background: deepskyblue;
            height: 35px;
            line-height: 30px;
            text-align: center;
            font-size: 20px;
            border-radius: 5px;
        }
        #cx_button{
            width: 100%;
            height: 100%;
            background: none;
            border-style: none;
            color: white;
            border-radius: 5px;
        }
        #ck{
            padding:20px 0px;
        }
        #station1,#station2{
            border-style: none;
            display: inline-block;
            line-height: 50px;
            font-size: 30px;
        }

        #train_list{
            height: 600px;
            width: 350px;
            background-color:rgba(255,255,255,0.5);
            border:1px solid red;
            border-radius: 10px;
            position: fixed;
            left: 50%;
            margin-left: -180px;
            display: none;


        }
    </style>
</head>
<body>
    <div id="title">
        车票预订
    </div>
    <div id="train_list">
        我在这里
    </div>
    <div id="main">
        <div id="station">
            <div id="from">
                <input id="station1" type="text" size="2" value="北京">
            </div>
            <div id="change">--</div>
            <div id="to">
                <input id="station2" type="text" size="2" value="杭州">
            </div>
        </div>
        <div id="train_date">
            <div id="train_date_text">出发日期</div>
            <div id="train_date_data"> 2017-11-1</div>
            <div id="student" >
                <input id="stu" type="checkbox">学生
            </div>
        </div>
        <div id="time">
            <div id="time_text">出发时间</div>
            <div id="time_date">
                <select name="time_date" id="time_date_select">
                <option value="00:00-24:00">00:00-24:00</option>
                <option value="00:00-12:00">00:00-12:00</option>
                <option value="12:00-18:00">12:00-18:00</option>
                <option value="18:00-24:00">18:00-24:00</option>
                </select>
            </div>
        </div>
        <div id="seat">
            <div id="seat_text">座位</div>
            <div id="seat_data">
                <select name="" id="seat_data_select">
                <option value="硬座">硬座</option>
                <option value="硬卧">硬卧</option>
                <option value="软卧">软卧</option>
                <option value="一等座">一等座</option>
                <option value="二等座">二等座</option>
                <option value="特等座">特等座</option>
                <option value="无座">无座</option>
                <option value="不限">不限</option>
                 </select>
            </div>
        </div>

        <div id="train_type">
            <div id="all_train">
                <input type="checkbox" class="cb" name="train_type">全部
            </div>
            <div id="D_train">
                <input type="checkbox" class="cb" name="train_type">G/D/C
            </div>
            <div id="Z_train">
                <input type="checkbox" class="cb" name="train_type">Z字头
            </div>
            <div id="T_train">
                <input type="checkbox" class="cb" name="train_type">T字头
            </div>
            <div id="K_train">
                <input type="checkbox" class="cb" name="train_type">K字头
            </div>
            <div id="etc">
                <input type="checkbox" class="cb" name="train_type">其他
            </div>
        </div>
        <div id="ck">
            <input type="checkbox" name="ck">杨帆
            <input type="checkbox" name="ck">刘洋
            <input type="checkbox" name="ck">侠仔
            <input type="checkbox" name="ck">白客
            <input type="checkbox" name="ck">阿文
        </div>
        <div id="cx">
            <button id="cx_button" name="ck" onclick="search();">查询</button>
        </div>

    </div>
    <div id="tail"></div>

    <script>
        var from_station=document.getElementById("station1").value;
        var to_station=document.getElementById("station2").value;
        var train_date=document.getElementById("train_date_data").innerText;
        var seat_type=document.getElementById("seat_data_select").value;
        var cx_button=document.getElementById("seat_data_select");
        var train_list=document.getElementById("train_list");
        function search() {
             if (window.ActiveXObject) {
                xml = new ActiveXObject("winhttp.winhttprequest.5.1");
                }
            else {
                xml = new XMLHttpRequest();
                }
            xml = new XMLHttpRequest();
            xml.open("POST", "/12306/search/", true);
            var postdata = "train_date=" + train_date + "&dp=" + from_station + "&ar=" + to_station;
            xml.onreadystatechange = function () {
            if (xml.status) {
                train_list.innerHTML=xml.response;
                train_list.style.display="block";

            }
        }
        xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xml.send(postdata);
    }




    </script>



</body>
</html>